<template>
    <div class="content">
     <el-form :inline="true" style="margin-left: 80px;">
      <el-form-item label="关键词">
        <el-input v-model="form.title" placeholder="请输入关键词" clearable />
      </el-form-item>
      <el-form-item label="分类">
        <el-select
          v-model="form.categoryId"
          placeholder="请选择分类"
          clearable
          style="width: 200px;"
        >
          <el-option label="文学分类" value="1" />
          <el-option label="科普期刊" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="推荐:">
        <el-select
          v-model="form.isRecommend"
          placeholder="是否推荐"
          clearable
          style="width: 100px;"
        >
          <el-option label="推荐" value="1" />
          <el-option label="常规" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="顶尖:">
        <el-select
          v-model="form.isTop"
          placeholder="是否顶尖"
          clearable
          style="width: 100px;"
        >
          <el-option label="顶尖" value="1" />
          <el-option label="常规" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" style="margin-left: 250px;" @click="queryAll">查询</el-button>
        <el-button type="success" style="margin-left: 20px;" @click="deleteAll">批量删除</el-button>
      </el-form-item>
     </el-form>
     <el-table
        :data="tableData"
        style="width: 90%; margin: 0 auto; height: 305px;"
        border
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        highlight-current-row
        :row-class-name="rowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="title" label="文章标题" width="200"/>
        <el-table-column prop="authorName" label="作者昵称" width="150"/>
        <el-table-column prop="categoryName" label="分类名称" width="150"/>
        <el-table-column prop="summary" label="文章摘要" min-width="200"/>
        <el-table-column prop="viewCount" label="浏览量" min-width="100"/>
        <el-table-column prop="likeCount" label="点赞量" min-width="100"/>
        <el-table-column prop="commentCount" label="评论数" min-width="100"/>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="primary" icon="Edit" class="operate-btn" plain @click="edit(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="form.page"
        v-model:page-size="form.size"
        :page-sizes="[1, 3, 5, 10]"
        background
        layout="sizes, prev, pager, next, jumper, total"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px; align-self: center"
      />

      <Drawer v-if="drawerStore.articleDrawer === true"></Drawer>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Drawer from '@/views/Admin/article/components/index.vue'
import { useDrawerStore } from '@/stores/drawer';
import { useTimeStore } from '@/stores/time';
import { fetchArticle, fetchSingleArticle, deleteArticles } from '@/apis/admin/article';
import type { ArticleRow } from '@/types/admin/article';

const drawerStore = useDrawerStore()
const timeStore = useTimeStore();
const selectedIds = ref<number[]>([]);
const form = ref({
  page: 1,
  size: 10,
  title: '',
  categoryId: '1',
  userId: '123456',
  status: '1',
  isTop: '0',
  isRecommend: '0',
  startTime: timeStore.startTime,
  endTime: timeStore.endTime
})

const tableData = ref<ArticleRow[]>([]);

const headerCellStyle = {
  'background-color': 'rgb(61, 141, 253)',
  'color': 'white',
  'font-weight': 'bold',
  'text-align': 'center',
  'font-size': '17px',
  'height': '65px',
  'border': 'none'
}

const rowStyle = {
  'height': '60px'
}

const cellStyle = {
  'text-align': 'center',
  'vertical-align': 'middle'
}

const rowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
}

const handleSelectionChange = (val: any[]) => {
  selectedIds.value = val.map((item) => item.id);
};

const handleSizeChange = (val: number) => {
  form.value.size = val;
}

const handleCurrentChange = (val: number) => {
  form.value.page = val;
}

async function queryAll(){
  const params = form.value;
  try{
    const res = await fetchArticle(params);
    console.log('文章列表', res);
    tableData.value = res.records;
  } catch (error) {
    console.error('查询文章列表失败', error);
  }
}

 async function deleteAll(){
  if (selectedIds.value.length === 0) {
    console.warn('请选择要删除的文章');
    return;
  }
  const res = await deleteArticles(selectedIds.value);
  console.log('批量删除文章', res);
  queryAll();
}

async function edit(row: ArticleRow){
  const rowId = row.id
  console.log('文章ID', rowId)
  try {
    const res = await fetchSingleArticle(rowId);
    console.log('单个文章详情', res)
    drawerStore.articleRow = res
  } catch (error) {
    console.error('获取单个文章详情失败', error);
  }
  drawerStore.articleDrawer = true;
}

onMounted(() => {
  queryAll();
});
</script>

<style scoped>
@import url('./index.css');
</style>
